import React, { useEffect } from 'react';
/* 引入antd */
import { List, Select, Button, Form, Radio, Tag, Card } from 'antd';

/* 引入上下文 */
import useStore from '../../../context/useStore';

/* 样式 */
import styles from './index.module.scss';

import { useObserver } from 'mobx-react-lite';
/* import { resetGlobalState } from 'mobx/lib/internal'; */

const { Option } = Select;

/* const { CheckableTag } = Tag; */


/* 课程类型颜色 */
let colors = ["magenta", "red", "volcano", "orange", "gold", "lime", "green", "cyan", "blue", "purple"];


const ViewQuestion: React.FC = () => {
    let { questions } = useStore();

    

    useEffect(() => {
        /* 获取所有的课程类型 */
        questions.getSubjectListAction();
        /* 获取所有的考试类型 */
        questions.getExamTypeAction();
        /* 获取所有的试题 */
        questions.getQuestionsListAction();
        /* 获取所有的试题类型 */
        questions.getQuestionsTypeAction();
    }, [questions]);

    const onFinish = (values: any) => {
        /* console.log('values...', values); */

      

        /* 调用按条件获取试题接口 */
        questions.getConditionAction(values);
    };

    /* 样式布局 */
    const layout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 16 },
    };

    /* 验证 */
    const validateMessages = {
        required: `${'label'} is required!`,
        types: {
            email: `${'label'}`,
            number: `${'label'} is not a validate number!`,
        },
        number: {
            range: `${'label'} must be between ${'min'} and ${'max'}`,
        },
    };


    return useObserver(() => <React.Fragment>
        <h2>查看试题</h2>
        <Card style={{ marginTop: 16, width: '100%', borderRadius: 7 }}>
            <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                <Form.Item name='subject_id' label="课程类型：">
                    <Radio.Group style={{ width: "100%" }}>
                        {
                            questions.subjectList.map((item: any, index) => {
                                /* console.log('课程类型。。。',item);  */

                                return <Tag className={styles.kcdiv} color={colors[index]} key={item.subject_id} style={{ marginTop: 10 }}>

                                    <Radio value={item.subject_id} key={item.subject_id}>{item.subject_text}</Radio>
                                </Tag>
                            })
                        }
                    </Radio.Group>
                </Form.Item>
                <Form.Item name='exam_id' label="考试类型：">
                    <Select style={{ width: 120 }}>
                        {
                            questions.examTypeList.map((item: any) => {
                                /*  console.log('类型。。',item); */
                                return <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name='questions_type_id' label="题目类型：">
                    <Select style={{ width: 120 }}>
                        {
                            questions.questionsTypeList.map((item: any) => {
                                /*  console.log('题目。。。',item); */
                                return <Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item >
                    <Button type="primary" htmlType="submit">查询</Button>
                </Form.Item>
            </Form>
        </Card>
        <List
            itemLayout="horizontal"
            pagination={{
                onChange: page => {
                    /* console.log(page); */
                },
                pageSize: 10,
            }}
            dataSource={questions.questionsList}
            renderItem={(item: any) => (
                <Card style={{ marginTop: 16, width: '100%', borderRadius: 7 }}>
                    <List.Item
                        /* className={styles.ant-list-item} */
                        actions={[<a href='list-loadmore-edit' style={{ background: 'none', border: 'none' }} >编辑</a>]}
                    >

                        <List.Item.Meta
                            title={<a style={{ fontSize: 14 }} href="/">{item.title}</a>}
                            description={
                                <div className={styles.itemlist}>
                                    <p>
                                        <span className={styles.span}>{item.questions_type_text}</span>
                                        <span className={styles.span}>{item.subject_text}</span>
                                        <span className={styles.span}>{item.exam_name}</span>
                                    </p>
                                    <p style={{ color: '#0139FD', cursor: 'pointer', fontSize: 13 }}>
                                        {item.user_name}发布
                                    </p>
                                </div>
                            }
                        />
                    </List.Item>
                </Card>
            )}
        />
    </React.Fragment>)
}

export default ViewQuestion;
